<template>
  <div>
    <RemoteTable :namespace="namespace" :columns="columns" :queryParam="itemsQueryParam" >
      <Authc permissions="invoice:taxpayerItems:add">
        <Button type="primary" @click="handleAdd">新增</Button>
      </Authc>
    </RemoteTable>
    <Modal v-model="showAddForm" title="新增" footer-hide>
      <AddForm v-if="showAddForm" :taxpayerId="this.taxpayerId" @reloadItems="handleSearch" @closeAdd="closeAdd" />
    </Modal>
    <Modal v-model="showEditForm" title="修改" footer-hide>
      <EditForm v-if="showEditForm" :id="editId" @reloadItems="handleSearch" @closeEdit="closeEdit" />
    </Modal>
  </div>
</template>

<script>
import RemoteTable from "@/components/RemoteTable";
import config from "@/utils/config";
import Authc from "@/components/Authc";
import { namespace } from "../module";
import { Button, Input, Modal, Message } from "view-design";
import AddForm from "../AddForm";
import EditForm from "../EditForm";
import Action from "./Action";
export default {
  name: "ItemsListTable",
  components: {RemoteTable,Button,Input,Modal,Authc,AddForm,EditForm,Authc},
  props : {
    taxpayerId: String
  },
  data: function() {
    let vm = this;
    return {
      editId: null,
      showAddForm: false,
      showEditForm: false,
      namespace: namespace,
      itemsQueryParam: {
        taxpayerId: vm.$props.taxpayerId
      },
      columns: [
        {
          title: "分类编码",
          key: "classifyCode",
          align: "center",
          sortable: "custom",
          sortType: "asc"
        },
        {
          title: "分类名称",
          key: "classifyName",
          align: "center",
          sortable: "custom"
        },
        {
          title: "分类税率",
          key: "taxRate",
          align: "center",
          sortable: "custom",
          render: (h, params) => {
            let text = params.row.taxRate / 1000 * 100;
            return h('span', {}, text + '%');
          }
        },
        {
          title: "商品编码",
          key: "businessCode",
          align: "center",
          sortable: "custom"
        },
        {
          title: "商品名称",
          key: "businessName",
          align: "center",
          sortable: "custom"
        },
        {
          title: "商品单价",
          key: "price",
          align: "center",
          sortable: "custom"
        },
        {
          title: "状态",
          key: "enabled",
          align: "center",
          sortable: "custom",
          render: (h, params) => {
            let text = params.row.enabled == '1' ? '可用' : '不可用';
            return h('span', {}, text);
          }
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          permissions: ["invoice:taxpayerItems:edit", "invoice:taxpayerItems:delete"],
          width: 90,
          render: function(h, data) {
            return h(Action, {
              props: {
                row: data.row
              },
              on: {
                onEdit: vm.handleEdit
              }
            });
          }
        }
      ]
    };
  },
  computed: {
    queryParam: {
      get() {
        return this.$store.state[namespace].query;
      },
      set(value) {
        this.$store.commit(`${namespace}/saveState`, {
          query: value
        });
      }
    }
  },
  methods: {
    handleAdd() {
      this.showAddForm = true;
    },
    handleEdit(row) {
      this.editId = row.id;
      this.showEditForm = true;
    },
    closeAdd() {
      this.showAddForm = false;
    },
    closeEdit() {
      this.showEditForm = false;
    },
    handleSearch() {
      this.$store.dispatch(`${namespace}/query`, {
        limit: {
          currentPage: 1
        }
      });
    }
  }
};
</script>

<style>
</style>